<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ref, onMounted, onUnmounted } from 'vue'

const router = useRouter()

// 功能列表数据
const functionList = [
  {
    id: 'drag-drop',
    name: '拖拽demo',
    icon: '📦',
    description: '实现拖拽排序和文件上传功能'
  },
  {
    id: 'calculator',
    name: '计算器',
    icon: '🧮',
    description: '科学计算器功能'
  },
  {
    id: 'weather',
    name: '天气预报',
    icon: '🌤️',
    description: '实时天气查询功能'
  },
  {
    id: 'timer',
    name: '计时器',
    icon: '⏱️',
    description: '倒计时和秒表功能'
  },
  {
    id: 'music',
    name: '音乐播放器',
    icon: '🎵',
    description: '在线音乐播放功能'
  }
]

// 引用滚动容器元素
const scrollContainer = ref<HTMLElement>()
// 引用滚动内容元素
const scrollContent   = ref<HTMLElement>()

// 存储 requestAnimationFrame 返回的动画 ID
let animationId   = 0
// 存储当前的滚动位置
let scrollPosition = 0
// 存储滚动速度，默认值为 0.5
let scrollSpeed   = 0.5

// 根据功能 ID 导航到对应的功能页面
const navigateToFunction = (id: string) => router.push(`/function/${id}`)

// 启动自动滚动功能
const startAutoScroll = () => {
  // 定义滚动动画的回调函数
  const scroll = () => {
    // 如果滚动容器或滚动内容元素不存在，则退出函数
    if (!scrollContainer.value || !scrollContent.value) return
    // 获取滚动容器的宽度
    const cw = scrollContainer.value.offsetWidth
    // 获取滚动内容的宽度
    const sw = scrollContent.value.scrollWidth
    // 如果滚动内容宽度小于等于容器宽度，无需滚动，退出函数
    if (sw <= cw) return
    // 更新滚动位置，减去当前滚动速度
    scrollPosition -= scrollSpeed
    // 如果滚动位置超出内容宽度，重置滚动位置以实现无缝循环
    if (scrollPosition <= -sw) scrollPosition = cw
    // 通过 transform 属性设置滚动内容的位置
    scrollContent.value.style.transform = `translateX(${scrollPosition}px)`
    // 递归调用 requestAnimationFrame 实现动画循环
    animationId = requestAnimationFrame(scroll)
  }
  // 启动第一次动画帧
  animationId = requestAnimationFrame(scroll)
}

// 停止自动滚动功能
const stopAutoScroll = () => cancelAnimationFrame(animationId)
// 加速滚动，将滚动速度设置为 5
const speedUpScroll = () => (scrollSpeed = 5)
// 停止加速，将滚动速度恢复为默认值 0.5
const stopSpeedUp   = () => (scrollSpeed = 0.5)

// 组件挂载时启动自动滚动
onMounted(() => {
  startAutoScroll()
})

// 组件卸载时停止自动滚动，防止内存泄漏
onUnmounted(() => {
  stopAutoScroll() 
})
</script>

<template>
    <div class="xl:w-[500px] min-h-[200px] w-auto rounded-4xl m-10 px-5 py-10 border-solid border-2 border-[#D9D9D9]">
      <h1 class="text-3xl font-bold text-center mb-8">功能小demo</h1>
      
      <!-- 控制说明 -->
      <div class="text-center text-sm text-gray-500 mb-4">
        <p>鼠标悬停暂停  | 点击卡片进入</p>
      </div>
      
      <!-- 滚动容器 -->
      <div 
        ref="scrollContainer"
        class="overflow-hidden relative h-[180px] cursor-grab active:cursor-grabbing"
        @mouseenter="stopAutoScroll"
        @mouseleave="startAutoScroll"
      >
        <!-- 滚动内容 -->
        <div 
          ref="scrollContent"
          class="flex space-x-6 absolute top-0 left-0 h-full"
        >
          <!-- 功能卡片 -->
          <div 
            v-for="func in functionList" 
            :key="func.id"
            class="flex-shrink-0 w-[200px] bg-white rounded-lg shadow-md p-6 cursor-pointer hover:shadow-lg transition-all duration-300 function-card"
            @click="navigateToFunction(func.id)"
          >
            <div class="text-4xl text-center mb-4">{{ func.icon }}</div>
            <h3 class="text-xl font-semibold text-center mb-2">{{ func.name }}</h3>
            <p class="text-gray-600 text-center text-sm">{{ func.description }}</p>
          </div>
          

        </div>
      </div>
      
      <!-- 加速 -->
      <div class="flex justify-center mt-6">
        <div class="relative group">
          <!-- 按钮背景光效 -->
          <div class="absolute inset-0 bg-gradient-to-r from-green-400 to-emerald-500 rounded-xl blur opacity-75 group-hover:opacity-100 transition-all duration-300"></div>
          
          <!-- 主按钮 -->
          <button 
            @mouseenter="speedUpScroll"
            @mouseleave="stopSpeedUp"
            class="relative px-8 py-4 bg-gradient-to-r from-green-500 to-emerald-600 text-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 active:scale-95 group-hover:translate-y-[-2px] text-lg font-semibold flex items-center justify-center space-x-2"
          >
            <!-- 加速图标 -->
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
            </svg>
            <span>加速</span>
          </button>
          
        </div>
      </div>
    </div>
</template>

<style scoped>
/* 滚动容器样式 */
.scroll-container {
  overflow: hidden;
  position: relative;
}

/* 滚动内容样式 */
.scroll-content {
  display: flex;
  transition: transform 0.1s linear;
}

/* 功能卡片样式 */
.function-card {
  transition: all 0.3s ease-in-out;
  flex-shrink: 0;
}

.function-card:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* 确保滚动内容不会被换行 */
.scroll-content > * {
  flex-shrink: 0;
}
</style>
